<!--声明文档类型：告诉浏览器使用html5语法-->
<!DOCTYPE html>
<html>
<head>
<!-- 文字：编码 UTF-8万国码  解决乱码   -->
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body bgcolor="">
<!--编写页面-->
<!--html基础：W3C联盟组织：百度、苹果、微软..
              专门定制网页执行标准
    html语法：<w3c定制单词>
    标记：  前标记<body>   后标记</body>
           封闭标记<input />  <br />
    元素：<body><i>倾斜</i></body>
          前标记+内容【文本】+后标记
    网页：结构：元素嵌套而成--知道：元素嵌套关系
    制作网页：知道元素是做什么？【所见即所得】
    文本
    图片
    超链接
    表格
    列表
    表单--采集信息
    新元素：视频、音频...
-->
<!--①文本-->
<marquee>跑马灯元素</marquee>
<span> 文本元素 </span>
<span> 文本元素2 </span>
<p> 段落元素</p>
<p> 段落元素2</p>
<i>倾斜元素</i>
<s>删除元素</s>
<del>删除元素：html4语法</del>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto assumenda consectetur doloremque ducimus eveniet id magnam molestias, nam neque omnis recusandae sint, suscipit? Aut deleniti dolor ea laboriosam possimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam aperiam blanditiis commodi cumque cupiditate debitis delectus, dicta ea, error eum hic libero, natus nulla quia quibusdam ratione repellat voluptas.</p>
<!--②图片元素  图片样式 属性=属性值【产生效果】
               通用属性与属性值【元素】
               专用属性与属性【元素】
               原则上：建议使用CSS实现效果
 img元素：src资源属性=“图片路径+图片全称”
        图片相对路径：./ 向上一级
        /代表 路径
 -->
<img src="./img/2.png" alt="小马马" title="小马">
<!--超链接：页面跳转
    href跳转属性=属性值【6种方式】
-->
<a href="01_案例大风车.html">超链接：跳转本地</a>
<a href="http://www.baidu.com">超链接：跳转网站</a>
<a href="1.zip">超链接：实现下载</a>
<a href="mailto:wangsw@tedu.cn">超链接：跳转邮件</a>
<a href="javascript:alert('你好，JS')">超链接：跳转JS效果</a>
<a href="#">超链接：跳转本地</a>
<hr>
<!--③表格  table表格+tr行+td列  用法：布局-->
<!--需求：实现3行3列的表格-->
<table border="1" width="300px" height="300px" cellpadding="0" cellspacing="0">
    <tr>
<!-- 复杂表格： colspan跨列=数值  删除当前行td
               rowspan跨行=数值  删除下一行td
-->
        <td colspan="2">a</td>
        <td rowspan="2">b</td>
    </tr>
    <tr>
        <td rowspan="2">c</td>
        <td>d</td>
    </tr>
    <tr>
        <td colspan="2">e</td>
    </tr>
</table>
<!--列表：【三种】  页面数据编写元素
        有序列表    ol+li元素【多个】 较为常用
        无序列表    ul+li元素【多个】 常用
-->
<ul>
    <li>lorem1</li>
    <li>lorem2</li>
    <li>lorem3</li>
</ul>
<ol>
    <li>lorem1</li>
    <li>lorem2</li>
    <li>lorem3</li>
</ol>
<!--定义列表-->
<dl>
    <dt><img src="./img/2.png"></dt>
    <dd>这是一只马</dd>
</dl>
<!--表单：采集用户信息  
    action提交地址：【后台语言】
    method提交方式：与name属性一起使用
    get：默认数据提交方式，浏览器地址显示数据
         不安全提交方式【保存数据：2KB】
    post：校验表单中信息：账号、密码
          不会在浏览器显示【浏览器工具区】
          安全提交方式
-->
<form action="http://www.baidu.com" method="post">
    账号:<input name="user">
    密码:<input name="password">
    <input type="submit">
</form>

<!--新元素   休息：10分钟   15:00 -->
现在时间：<mark>14:40</mark>
<video src="./img/oceans-clip.mp4" controls></video>
</body>
</html>
